import React, {Component} from 'react';
import MyHeader from "../MyUIComponent/MyHeader";
import { Table, Divider } from "antd";
import {axiosGetFunction, axiosPostFunction} from "../MyConfig/AppConfig";

class AllImgWork extends Component {

    state = {
        img_works: []
    }

    componentDidMount() {
        this.loadImgWorkAll();
    }

    loadImgWorkAll = (callBack) => {
        axiosGetFunction("/img_work/all", (received_data)=>{
            let { dataList } = received_data;
            this.setState({ img_works: dataList });
            if (callBack) callBack();
        })
    }

    // 点击按钮之后做的事情
    onClickAction = (action_str, img_work_id) => {
        console.log(action_str, img_work_id);
        let url = ""
        if (action_str === "publish"){
            url = "/img_work/publish"
        }else if (action_str === "cancel"){
            url = "/img_work/cancel"
        }else if (action_str === "delete"){
            url = "/img_work/delete"
        }
        if (url !== ""){
            axiosPostFunction(url, {
                img_work_id
            }, ()=>{
                this.loadImgWorkAll();
            })
        }
    }

    render() {
        let { img_works } = this.state;
        console.log("AllImgWork: render: ", img_works);
        return (
            <div>
                <MyHeader pathname="all_img_work"/>
                <div style={{ padding: "30px" }}>
                    <h2><strong>所有组态</strong></h2>
                    <Table
                        dataSource={ img_works.map((item)=>({ key: "img_work:" + String(item.img_work_id), ...item })) }
                        columns={[
                            {
                                title: "组态ID",
                                dataIndex: "img_work_id",
                                key: "img_work_id"
                            },
                            {
                                title: "标题",
                                dataIndex: "title",
                                key: "title",
                            },
                            {
                                title: "作者",
                                dataIndex: "author",
                                key: "author",
                                render: (item)=>{
                                    return item ? item.username: "Error"
                                }
                            },
                            {
                                title: "是否发布",
                                dataIndex: "published",
                                key: "published",
                                render: (item)=>{
                                    return item===1 ? "已发布": "未发布"
                                }
                            },
                            {
                                title: "数据库链接",
                                dataIndex: "database_host",
                                key: "database_host",
                            },
                            {
                                title: "数据库名称",
                                dataIndex: "database_name",
                                key: "database_name",
                            },
                            {
                                title: "操作",
                                dataIndex: "operation",
                                key: "operation",
                                render: (item, record)=>{
                                    return <span>
                                    {record.published === 0 && <a onClick={()=>{ this.onClickAction("publish", record.img_work_id) }} >发布</a>}
                                        {record.published === 1 && <a onClick={()=>{ this.onClickAction("cancel", record.img_work_id) }} >取消发布</a>}
                                        <Divider type="vertical"/>
                                    <a onClick={()=>{ this.onClickAction("delete", record.img_work_id) }}>删除</a>
                                </span>
                                }
                            }
                        ]}
                    />
                </div>
            </div>
        );
    }
}

export default AllImgWork;
